<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./index.css">
	<title></title>
	<style type="text/css">
		 *{
		 	margin: 0;
		 	padding: 0;
		 }
		 a{
		 	text-decoration: none;
		 }
		 .mainf{
		 	width: 1000px;
		 	margin: 0 auto;
		 }
		 /*	导航开始	 */
		 .nav{
		 	height: 50px;
		 	margin: 20px;
         }
		 .nav .logo{
		 	float: left;
		 	height: 50px;
		 }
		 .nav .navlest{
		 	float:right;
		 	width: 600px;
		 	height: 50px;
		 	background: #48AD15;
		 	border-radius: 25px;
		 }
		 .clearfix::after{
		 	content: '';
		 	display: block;
		 	clear: both;
		 }
           .navlest a{
		 	text-decoration: none;
		 	color: white;
		 	line-height: 50px;
		 	margin-left:20px;
		 	padding:15px 18px;
		 }
		 .navlest a:hover{
		 	color: black;
		 	background: white;
		 }
		 .navlest .first{
		 	color: black;
		 	background: yellow;
		 	margin-left: 40px;
		 }
		/*	内容开始	 */
		 .left{
		 	float: left;
		 	width: 60%;
/*		 	height: 600px;*/
		 }
		 .right{
		 	float: right;
		 	width: 38%;
		 	height: 600px;
		 }
						/*	轮廓图开始	 */
		 .banner{
		 	width: 100%;
		 	height: 270px;
		 	margin-right: 20px;
		 }
		 .banner img{
		 	width: 100%;
		 	height: 100%;
		 }
    					/*	文章开始	 */
		 .art{
		 	margin-top: 20px;
		 }
		 .art .titletext{
		 	border-bottom: 2px solid red;
		 	margin-bottom: 20px;
		 }
		 .t3 a{
		 	padding-right: 10px;
		 	float: right;
		 	color: gray;
		 	font-size: 13px;
		 	text-decoration: none;
		 }
						/*	文章列表区域	 */
		 .art .item{
		 	margin: 20x;
		 	padding: 20px;
		 	border-bottom: 1px solid #D5D5D5;
		 }		 
		 .art .item .row-left{
		 	float: left;
		 	width: 30%;
		 }
		 .art .item .row-left img{
		 	width: 90%;
		 }
		 .art .item .row-right{
		 	width: 70%;
		 	float: right;
		 }
		 .art .item .row-right a{
		 	text-decoration: none;
		 	color: #B8A808;
		 }
		 .art .item .row-right p{
		 	font-size: 12px;
		 	color: gray;
		 }
		 .art .item .row-right .spleft{
			padding: 5px;
		 	margin: 10px;
		 	float: left;
		 	font-size: 12px;
		 }
		 .art .item .row-right .spleft img{
		 	position: relative;
		 	left: 0px;
		 	top: 3px;
		 }
		 .art .item .row-right .spright{
		 	padding: 5px;
		 	margin: 10px;
		 	float: right;
		 	font-size: 12px;
		 }
		 .art .item .row-right .spright img{
 		 	position: relative;
		 	left: 0px;
		 	top: 3px;
		 }

/*									右边	*/
					/*	关注我	*/
		 .care {
		 	height: 150px;
		 }
		 .care h3{
		 	padding: 10px;
		 	border-bottom: 1px solid #d5d5d5;
		 }
		 .care .cared{
		 	display: inline-block;
		 	width: 15%;
		 	margin: 15px;
		 	font-size: 13px;
		 	padding-top: 55px;
		 	background: url(../CSS练习/img/ico_05_1.jpg) no-repeat;
		 }
		 .care .cared:hover{
		 	background: url(../CSS练习/img/ico_05.png) no-repeat;
		 }
		 .ad{
		 	height: 120px;
		 }
		 .ad img{
		 	width: 100%;
		 }
					/*	新闻列表	 */
		 .news{
		 	width: 100%;
		 	height: 300px;
		 	margin-top: 20px;
		 }
		 .news .newstop{
		 	width: 100%;
		 	height: 30px;
		 	border-bottom: 1px solid #d5d5d5;
		 }
		 .news .newstop .newsfirst{
		 	background: orange;
		 	color: white;
		 }
		 .news .newstop a{
		 	margin: 5px;
		 	padding: 10px;
		 	color: black;
		 }
		 .news .newstop a:hover{
		 	background: orange;
		 	color: white;
		 }
		 .news .newsbody{
		 	margin: 10px;
		 	background: url(../CSS练习/img/ph2.png) no-repeat;
		 	background-position: 15px 13px;
		 }
		 .news .newsbody li{
		 	font-size: 15px;
		 	margin-left: 13px;
		 	padding: 10px;
		 	padding-left: 25px;
		 	border-bottom: 1px solid #d5d5d5;
		 	list-style: none;
		 }
		 .news .newsbody a{
		 	color: black;
		 }
		 .news .newsbody span{
		 	color: white;
		 }
					/*	标签云	 */
		 .tag{
		 	margin-top: 20px;
		 }
		 .tag h3{
		 	padding: 10px;
		 	border-bottom: 1px solid #d5d5d5;
		 }
		 .tag .tagbody{
		 	margin: 10px;
		 	padding: 10px;
		 }
		 .tag .tagbody a{
		 	color: white;
		 	display: inline-block;
		 	font-size: 13px;
		 	background: #036564;
		 	padding: 5px;
		 	margin: 7px;
		 	margin-top: 10px;
		 	border-radius: 5px;
		 }
		 .tag .tagbody .aaa{
		 	background: orange;
		 }
					/*	图文详情	 */
		 .rem{
		 	margin-top: 20px;
		 }
		 .rem h3{
		 	padding: 10px;
		 	border-bottom: 1px solid #d5d5d5;
		 }
		 .rem .rembody{
		 	margin: 10px;
		 }
		 .rem .rembody:hover{
		 	background: #d5d5d5;

		 }
		 .rem .rembody-left{
		 	width: 20%;
		 	height: 50px;
		 	float: left;
		 }
		 .rem .rembody-left img{
		 	width: 100%;
		 }
		 .rem .rembody-right{
		 	width: 70%;
		 	margin: 5px;
		 	float: right;
		 	padding-left: 10px;
		 	
		 }
		 .rem .rembody-right h4{
		 	font-weight: normal;
		 	margin-bottom: 8px;
		 	color: gray;
		 }
 		 .rem .rembody-right h4:hover{
 		 	color: red;
 		 	text-decoration: underline;
 		 }
 		 .rembody-right img{
 		 	position: relative;
 		 	top: 3px;
 		 	left: 0px;
 		 }
		 .rembody-right span{
		 	margin-top: 10px;
		 	font-size: 12px;
		 }
		 .rembody-right a{
		 	color: #B8A808;
		 	padding: 1px 5px 5px;
		 	margin-bottom: 5px;
		 }

					/*	广告2	 */
		 .ad2{
		 	width: 100%;
		 	margin-top: 20px;
		 }
		 .ad2 img{
		 	width: 100%;
		 }
					/*	友情链接	 */
		 .friend{
		 	margin-top: 20px;
		 }
		 .friend span{
		 	font-size: 20px;
		 }
		 .friend a{
		 	float: right;
		 	font-size: 13px;
		 	color: gray;
		 }
		 .friend .fbody{
		 	border: 1px solid;
		 	margin-top: 10px;
		 	padding: 10px;
		 }
		 .friend .fbody span{
		 	font-size: 12px;
		 	color: gray;
		 	margin: 10px;
		 }
	</style>
</head>
<body>
	 <div class="main">
	 	<!-- 导航开始 -->
	 	<div class="nav clearfix">
	 		<div class="logo"><img src="../CSS练习/img/logo.png"></div>
	 		<div class="navlest">
	 			<a href="" class="first">首页</a>
		        <a href="">关于我</a>
		        <a href="">文章</a>
				<a href="">心情</a>
				<a href="">相册</a>
				<a href="">留言</a>
	 		</div>
	 	</div>
	 	<!-- 内容区域 -->
	 	<div class="con">
	 		<div class="left">
	 			<!-- 轮廓图开始 -->
	 			<div class="banner">
	 				 <img src="../CSS练习/img/a1.jpg">
	 			</div>
	 			<!-- 文章开始 -->
	 			<div class="art">

	 				<h3 class="titletext">
	 					<span>文章标题</span>
	 					<span class="t3">
	 						<a href="">栏目标题</a>
	 						<a href="">栏目标题</a>
	 						<a href="">栏目标题</a>
	 					</span>
	 				</h3>
	 				<!-- 文章列表区域 -->
	 				<div class="list">
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/01.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/02.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/03.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/04.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/05.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/01.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/01.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 					<div class="item clearfix">
	 						<div class="row-left">
	 							<img src="../CSS练习/img/01.jpg">
	 						</div>
	 						<div class="row-right">
	 							<h3>住在手机里的朋友</h3>
	 							<p>通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...</p>
	 							<span class="spleft">
	 								<img src="../CSS练习/img/newsbg01.png"><a href="">个人博客</a><img src="../CSS练习/img/newsbg02.png">2014-2-19
	 							</span>
	 							<span class="spright">
	 								<img src="../CSS练习/img/newsbg03.png">评论 <a href="">(30)</a>
	 								<img src="../CSS练习/img/newsbg04.png">浏览 <a href="">(499)</a>
	 							</span>
	 						</div>
	 					</div>
	 				</div>
	 			</div>
	 		</div>
	 		<div class="right">
	 			<!-- 关注我 -->
	 			<div class="care">
	 				<h3>关注我</h3>
	 				<div class="cared">
	 					<a href="">新浪微博</a>
	 				</div>
	 				<div class="cared">
	 					<a href="">新浪微博</a>
	 				</div>
	 				<div class="cared">
	 					<a href="">新浪微博</a>
	 				</div>
	 				<div class="cared">
	 					<a href="">新浪微博</a>
	 				</div>
	 			</div>
	 			<div class="ad">
	 				<img src="../CSS练习/img/ad.jpg">
	 			</div>
	 			<!-- 新闻列表 -->
	 			<div class="news">
	 				<div class="newstop">
	 					<a href="" class="newsfirst">点击排行</a><a href="">最新文章</a><a href="">站长推荐</a>
	 				</div>
	 				<ul class="newsbody">
	 					<li><a href="">住在手机里的朋友</a></li>
	 					<li><a href="">教你怎样用欠费手机拨打电话</a></li>
	 					<li><a href="">原来以为，一个人的勇敢是，删掉他的手...</a></li>
	 					<li><a href="">手机的16个惊人小秘密，据说99.999%</a></li>
	 					<li><a href="">你面对的是生活而不是手机</a></li>
	 					<li><a href="">豪雅手机正式发布! 在法国全手工打造的</a></li>
	 				</ul>
	 			</div>
	 			<!-- 标签云 -->
	 			<div class="tag">
	 				<h3>标签云</h3>
	 				<div class="tagbody">
	 					<a href="">个人博客</a><a href="" class="aaa">web开发</a><a href="">前端设计</a><a href="">HTML</a>
	 					<a href="">CSS3</a><a href="">HTML5+CSS3</a><a href="">百度</a><a href="">javascript</a>
						<a href="">个人博客</a><a href="">web开发</a><a href="">前端设计</a><a href="">HTML</a>
	 					<a href="">CSS3</a><a href="">HTML5+CSS3</a><a href="">百度</a><a href="">javascript</a>
	 				</div>
	 			</div>
	 			<!-- 图文推荐 -->
	 			<div class="rem">
	 				<h3>图文推荐</h3>
	 				<div class="rembody clearfix">
	 					<div class="rembody-left">
	 						<img src="../CSS练习/img/01.jpg">
	 					</div>
	 					<div class="rembody-right">
	 						<h4>住在手机里的朋友</h4>
	 						<span><img src="../CSS练习/img/lanmbq.png"><a href="">个人博客</a><img src="../CSS练习/img/datepng.png"><a href="">2014-2-19</a></span>
	 					</div>
	 				</div>
	 				<div class="rembody clearfix">
	 					<div class="rembody-left">
	 						<img src="../CSS练习/img/01.jpg">
	 					</div>
	 					<div class="rembody-right">
	 						<h4>住在手机里的朋友</h4>
	 						<span><img src="../CSS练习/img/lanmbq.png"><a href="">个人博客</a><img src="../CSS练习/img/datepng.png"><a href="">2014-2-19</a></span>
	 					</div>
	 				</div>
	 				<div class="rembody clearfix">
	 					<div class="rembody-left">
	 						<img src="../CSS练习/img/01.jpg">
	 					</div>
	 					<div class="rembody-right">
	 						<h4>住在手机里的朋友</h4>
	 						<span><img src="../CSS练习/img/lanmbq.png"><a href="">个人博客</a><img src="../CSS练习/img/datepng.png"><a href="">2014-2-19</a></span>
	 					</div>
	 				</div>
	 				<div class="rembody clearfix">
	 					<div class="rembody-left">
	 						<img src="../CSS练习/img/01.jpg">
	 					</div>
	 					<div class="rembody-right">
	 						<h4>住在手机里的朋友</h4>
	 						<span><img src="../CSS练习/img/lanmbq.png"><a href="">个人博客</a><img src="../CSS练习/img/datepng.png"><a href="">2014-2-19</a></span>
	 					</div>
	 				</div>
	 				<div class="rembody clearfix">
	 					<div class="rembody-left">
	 						<img src="../CSS练习/img/01.jpg">
	 					</div>
	 					<div class="rembody-right">
	 						<h4>住在手机里的朋友</h4>
	 						<span><img src="../CSS练习/img/lanmbq.png"><a href="">个人博客</a><img src="../CSS练习/img/datepng.png"><a href="">2014-2-19</a></span>
	 					</div>
	 				</div>
	 			</div>
	 			<!-- 广告2 -->
	 			<div class="ad2">
	 				<img src="../CSS练习/img/03.jpg">
	 			</div>
	 			<!-- 友情链接 -->
	 			<div class="friend clearfix">
	 				<span>友情链接</span>
	 				<a href="">[申请友情链接]</a>
	 				<div class="fbody">
	 					<span>个人博客</span><span>web开发</span><span>前端设计</span><span>HTML</span><span>CSS3</span><span>HTML5+CSS3</span><span>百度</span><span>javascrip</span>
	 				</div>
	 			</div>
	 		</div>
	 	</div>
	 </div>
</body>
</html>